<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!--  搜索区 -->
        <el-row type="flex" class="row-bg" justify="space-between" :gutter="20">
          <el-col :span="10">
            <div class="grid-content bg-purple">
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="关键字" prop="keyword">
                  <el-input
                    placeholder="根据编号搜索"
                    style="width: 80%"
                    v-model="query.keyword"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="10">
            <div
              class="grid-content bg-purple-light"
              style="padding-left: 380px; padding-right: 10px"
            >
              <el-button label-width="right" size="mini" @click="reset"
                >清除</el-button
              >
              <el-button type="primary" size="mini" @click="hSearch"
                >搜索</el-button
              >
            </div>
          </el-col>
        </el-row>
        <!-- 提示 -->
        <el-row>
          <el-col :span="24">
            <div class="i">
              <i class="el-icon-info" style="padding-left='5px'"></i>
              一共有 {{ total }} 条数据
            </div>
          </el-col>
        </el-row>
        <!-- 表格数据 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="编号" width="200">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.questionType === '1'">单选</span>
              <span v-else-if="scope.row.questionType === '2'">多选</span>
              <span v-else-if="scope.row.questionType === '3'">简答</span>
            </template>
          </el-table-column>
          <el-table-column prop="questionIDs" label="考题编号" width="200px">
            <template slot-scope="scope">
              <el-button
                class="but"
                type="text"
                v-for="item in scope.row.questionIDs"
                :key="item.number"
                size="medium"
                @click="hView(item)"
                >{{ item.number }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="180">
          </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)" width="150">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)" width="150">
          </el-table-column>
          <el-table-column prop="userName" label="录入人" width="180">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click="hDel(scope.row.id)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="text-align: right; margin-top: 20px"
          background
          @size-change="curChange"
          @current-change="thisPage"
          :current-page="Number(query.page)"
          :page-sizes="[20, 30, 50, 100]"
          layout="sizes, prev, pager, next, jumper"
          :total="Number(total)"
        >
        </el-pagination>
        <!-- 弹框 -->
        <el-dialog
          title="题目预览"
          :visible.sync="dialogVisible"
          width="900px"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          @close="hClose"
        >
          <viewDialog ref="showView" :obj="view" />
          <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="dialogVisible = false"
            style="padding-left=20px"
            >关 闭</el-button
          >
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
import viewDialog from '@/module-hmmm/components/questions-view'
export default {
  components: {
    viewDialog // 注册组件
  },
  data () {
    return {
      form: {},
      total: null, // 渲染数据总条数
      tableData: [], // 渲染数据列表
      view: {}, // 视频预览
      query: {
        page: '1', // 当前页数
        pagesize: '10', // 页尺寸
        keyword: null // 关键字
      },
      dialogVisible: false // 是否显示弹窗
    }
  },
  created () {
    this.hGetList()
  },
  methods: {
    // 获取题组列表
    async hGetList (id) {
      const res = await randoms({ ...this.query })
      console.log('获取到的数据------------->', res)
      this.tableData = res.data.items // 保存数据
      this.total = res.data.counts // 保存总数据
    },
    curChange (cur) {
      // 分页显示条数
      this.query.page = 1
      this.query.pagesize = cur
      this.hGetList()
    },
    thisPage (page) {
      // 分页查询
      this.query.page = page
      this.hGetList()
    },
    // 删除
    async hDel (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          removeRandoms({ id }).then((res) => {
            this.hGetList() // 从新加载
            this.$message.success('删除成功')
          })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 搜索
    hSearch () {
      this.hGetList()
      this.query.page = 1
    },
    // 搜索 重置
    reset () {
      this.$refs.form.resetFields()
      this.query.keyword = null
      this.query.page = 1
      this.hGetList()
    },
    // 预览
    hView (data) {
      console.log('data', data)
      this.dialogVisible = true
      this.view = data
    },
    // 取消
    hClose () {
      this.visible = false
      this.$refs.showView.showsp = false
    }
  }
}
</script>

<style scoped>
.i {
  padding-left: 25px;
  font-size: 14px;
  color: rgb(143, 146, 142);
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
  background: #dbd9d99d;
}
.but {
  margin-left: 0;
}
</style>
